<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        var db;
        var objectStore;

        function connectDb() {

            var request = window.indexedDB.open('mydb', 112);

            request.onerror = function (event) {
                console.log('连接错误', event);

            }

            request.onsuccess = function (event) {
                console.log(1);
                db = request.result//可以拿到数据库对象
                console.log(2);

                addFn();
            }
            //如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded
            request.onupgradeneeded = async function (event) {
                db = event.target.result;
                var objectStore = await db.createObjectStore('person', { keyPath: 'id', autoIncrement: true });
                objectStore.createIndex('name', 'name', { unique: false });
                objectStore.createIndex('email', 'email', { unique: false });
                console.log(objectStore, 'objectStore');
            }
        }

        connectDb();


        //添加数据
        function addFn() {
            var request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .add({ name: "xiaohong", email: 'zhangsan@example.com' });

            request.onsuccess = function (event) {
                console.log('数据写入成功');
                // update();
                remove();
            };

            request.onerror = function (event) {
                console.log('数据写入失败', event);

            }


        }

        //读取数据
        function readFn() {
            var transaction = db.transaction(['person']);
            var objectStore = transaction.objectStore('person');
            var request = objectStore.get(1);

            request.onerror = function (event) {
                console.log('事务失败');
            };

            request.onsuccess = function (event) {
                if (request.result) {
                    console.log('Name: ' + request.result.name);
                    console.log('Age: ' + request.result.age);
                    console.log('Email: ' + request.result.email);
                } else {
                    console.log('未获得数据记录');
                }
            };
        }


        //读取全部数据
        function readAll() {
            var objectStore = db.transaction('person').objectStore('person');
            var i = 1;

            var request = objectStore.openCursor();

            request.onsuccess = function (event) {
                var cursor = event.target.result;
                console.log('第几边', i++);

                if (cursor) {
                    console.log('Id: ' + cursor.key);
                    console.log('Name: ' + cursor.value.name);
                    console.log('Age: ' + cursor.value.age);
                    console.log('Email: ' + cursor.value.email);
                    cursor.continue();
                } else {
                    console.log('没有更多数据了！');
                }
            };
        }

        //更新数据
        function update() {
            var request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .put({ id: 3, name: '李三', email: 'lisi@example.com' });

            request.onsuccess = function (event) {
                console.log('数据更新成功');
            };

            request.onerror = function (event) {
                console.log('数据更新失败');
            }
        }

        //删除数据
        function remove() {
            var request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .delete(1);

            request.onsuccess = function (event) {
                console.log('数据删除成功');
            };
        }



    </script>
</body>

</html>